<template>
  <div class="header">
    <div class="Usertest">
      <h3>个人中心</h3>
      <h5 @click="tohome">首页</h5>
    </div>
    <div class="bodyall">
      <div>
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
      </div>
      <div class="items">
        <div>
          用户： <input v-model="account" class="tesrinput" type="text" />
        </div>
        <div>
          昵称： <input v-model="nickname" class="tesrinput" type="text" />
        </div>
        <div>地址： <input class="tesrinput" type="text" /></div>
        <div>
          性别：男<input class="sex" type="radio" name="sex" /> 女<input
            class="sex"
            type="radio"
            name="sex"
          />
        </div>
        <div>电话： <input class="tesrinput" type="text" /></div>
        <button @click="updatall" class="btnupdat">修改</button>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ref } from "vue";
export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    // 账号
    const account = ref(store.state.Userinformation.usercneter.account);
    // 回到主页
    let tohome = () => {
      router.go(-1);
    };
    // 昵称
    const nickname = ref(store.state.Userinformation.usercneter.nickname);
    // 修改
    const updatall=()=>{
      store.commit('nickname',{nickname:nickname.value,account:account.value,password:store.state.Userinformation.usercneter.password})
      router.go(-1)
      alert('修改成功')
    }
    return {
      tohome,
      account,
      nickname,
      updatall
    };
  },
};
</script>

<style scoped>
.header {
  width: 80%;
  height: 700px;
  margin-left: 10%;
  background: #fcfcfc;
  margin-top: 50px;
  background: #e6e6e6;
}
.Usertest {
  display: flex;
  justify-content: space-between;
}
.Usertest > :nth-child(1) {
  color: rgb(0, 0, 0);
  font-size: 40px;
  margin-left: 20px;
  font-weight: 100;
}
.Usertest > :nth-child(2) {
  line-height: 60px;
  margin-right: 50px;
  cursor: pointer;
}
.bodyall {
  width: 90%;
  height: 500px;
  margin-left: 5%;
  margin-top: 45px;
  border-radius: 10px;
  display: flex;
  background: white;
}
.bodyall > :nth-child(1) > :nth-child(1) {
  width: 400px;
  height: 400px;
}
.items {
  margin-top: 30px;
  height: 400px;
}
.items > div {
  height: 50px;
  font-size: 20px;
  font-weight: 100;
}
.tesrinput {
  width: 300px;
  height: 30px;
  font-size: 25px;
  outline: none;
}
.sex {
  transform: scale(2);
  cursor: pointer;
}
.items > :nth-child(4) > .sex {
  margin-left: 15px;
}
.btnupdat {
  width: 100px;
  height: 40px;
  margin-left: 150px;
  margin-top: 20px;
  font-size: 20px;
  background: #f1e7e7;
  border: none;
  cursor: pointer;
}
</style>